<template>
    <div class="glanceTab">
        <div class="glanceTabImg" @click="jumpPathTo(myGlanceObj.id)"><img :src="myGlanceObj.vertical_cover" alt="" /></div>
        <div class="glanceTabCon">
            <div class="glanceTabTit">{{ myGlanceObj.title }}</div>
            <div class="glanceTabNote" v-if="myGlanceObj['styles']">
                <span>{{ myGlanceObj.renewal_time || "已完结" }}</span>
                <span>{{ myGlanceObj["styles"][0] }}</span>
                <span>{{ num ? `观看至第 ${Number(num) + 1} 话` : "" }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { comicDetail } from "../request";

export default {
    name: "myConTab",
    props: ["uid", "num"],
    data() {
        return {
            myGlanceObj: {},
        };
    },

    methods: {
        getMyConTab() {
            comicDetail({ comic_id: this.uid })
                .then((data) => {
                    this.myGlanceObj = data.data;
                    return this.myGlanceObj;
                })
                .then((content) => {
                    this.$emit("loading", { flat: false });
                });
        },
        jumpPathTo(x) {
            this.$router.push({ path: `/details/${x}`, query: { id: x } });
        },
        judgment(x, y) {
            if (x == Number(y)) {
                return "已完结 共" + x + "章";
            } else {
                return "更新至" + x + "章";
            }
        },
    },
    created() {
        this.getMyConTab();
    },
};
</script>

<style lang="scss" scope>
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";
.glanceTab {
    padding: 0 0 0.2133rem;
    margin: 0 0.16rem;
    height: 3.68rem;
    display: flex;
    .glanceTabImg {
        height: 100%;
        width: 2.6133rem;
        img {
            height: 100%;
        }
    }
    .glanceTabCon {
        height: 100%;
        width: 5.3333rem;

        margin-left: 0.2667rem;
        // background: white;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .glanceTabTit {
            height: 0.64rem;
        }
        .glanceTabNote {
            height: 1.92rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            span {
                font-size: 0.3467rem;
                &:last-child {
                    margin-bottom: 0.2rem;
                }
                &:first-child {
                    margin-top: 0.2667rem;
                }
            }
        }
    }
}
</style>
